<template>
  <div
    class="rounded-lg  flex items-center justify-evenly w-full h-full relative md:w-screen md:h-screen md:bg-[#194bfb] overflow-hidden">
    <div class="rounded-md w-full h-full flex items-center justify-center overflow-hidden">
      <div class="oblique h-[130%] w-3/5 bg-white dark:bg-slate-900 transform -rotate-12 absolute -ml-80" />
      <div class="w-96 z-10">
        <el-form ref="formRef" :model="form" label-width="150px" size="large">
          <el-form-item label="系统admin账号密码">
            <el-input v-model="form.adminPassword" placeholder="请输入……"></el-input>
          </el-form-item>
          <el-form-item label="数据库类型">
            <el-select v-model="form.dbType" placeholder="请选择" class="w-full" @change="changeDB">
              <el-option key="mysql" label="mysql" value="mysql" />
              <el-option key="pgsql" label="pgsql" value="pgsql" />
              <el-option key="oracle" label="oracle" value="oracle" />
              <el-option key="mssql" label="mssql" value="mssql" />
              <el-option key="sqlite" label="sqlite" value="sqlite" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.dbType !== 'sqlite'" label="host">
            <el-input v-model="form.host" placeholder="请输入数据库链接" />
          </el-form-item>
          <el-form-item v-if="form.dbType !== 'sqlite'" label="port">
            <el-input v-model="form.port" placeholder="请输入数据库端口" />
          </el-form-item>
          <el-form-item v-if="form.dbType !== 'sqlite'" label="数据库用户名">
            <el-input v-model="form.user_name" placeholder="请输入数据库用户名" />
          </el-form-item>
          <el-form-item v-if="form.dbType !== 'sqlite'" label="数据库密码">
            <el-input v-model="form.password" placeholder="请输入数据库密码（没有则为空）" />
          </el-form-item>
          <el-form-item label="数据库名称">
            <el-input v-model="form.dbName" placeholder="请输入数据库名称" />
          </el-form-item>
          <el-form-item v-if="form.dbType === 'sqlite'" label="dbPath">
            <el-input v-model="form.dbPath" placeholder="请输入sqlite数据库文件存放路径" />
          </el-form-item>
          <el-form-item>
            <div style="text-align: right">
              <el-button type="primary" @click="onSubmit">立即初始化</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img class="h-full"
        src="@/assets/login_right_banner.jpg" alt="banner"></div>
  </div>
</template>

<script setup>
// @ts-ignore
import { initDB } from '@/api/initdb'
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'Init',
})

const router = useRouter()

const out = ref(false)

const form = reactive({
  adminPassword: '123456',
  dbType: 'mysql',
  host: '127.0.0.1',
  port: '3306',
  user_name: 'root',
  password: '123456',
  dbName: 'amtf',
  dbPath: ''
})

const changeDB = (val) => {
  form.dbType = val
  switch (val) {
    case 'mysql':
      form.port = '3306'
      break
    case 'pgsql':
      form.port = '5432'
      break
    case 'oracle':
      form.port = '1521'
      form.user_name = 'oracle'
      break
    case 'mssql':
      form.port = '1433'
      form.user_name = 'mssql'
      break
    case 'sqlite':
      break
  }
}
const onSubmit = async () => {
  if (form.adminPassword.length < 6) {
    ElMessage({
      type: 'error',
      message: '密码长度不能小于6位',
    })
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '正在初始化数据库，请稍候',
    spinner: 'loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    const res = await initDB(form)
    if (res.code === 0) {
      out.value = true
      ElMessage({
        type: 'success',
        message: res.msg,
      })
      router.push({ name: 'Login' })
    }
    loading.close()
  } catch (err) {
    loading.close()
  }
}
</script>

<style lang="scss" scoped>
.slide-in-fwd-top {
  -webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-fwd-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-fwd-top {
  0% {
    transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-fwd-top {
  0% {
    transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(1000px);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(1000px);
    opacity: 0;
  }
}

@-webkit-keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 750px) {
  .form {
    width: 94vw !important;
    padding: 0;
  }
}
</style>
